<template>
  <div class="app">
    <layout v-if="!isLogin"></layout>
    <router-view name="login" v-else></router-view>
    <audio
      ref="audio"
      controls
      style="display: none"
      :src="require(`@/assets/mp3/${name}.mp3`)"
      type="audio/mpeg"
    ></audio>
    <div
      class="musicBtn"
      @click="playMusic"
      style="z-index: 10; position: absolute"
      :class="!isplay ? 'noanim' : ''"
    >
      <img src="@/assets/image/play.png" alt="" class="btnImg" v-if="!isplay" />
      <img src="@/assets/image/pause.png" alt="" class="btnImg" v-else />
    </div>
  </div>
</template>

<script>
import layout from '@/layout'
import { mapState } from 'vuex'

export default {
  name: 'App',
  components: {
    layout
  },
  data() {
    return {
      isLogin: false,
      isplay: true,
      musicName: '',
      url: ''
    }
  },
  computed: {
    ...mapState(['name']),
  },
  created() {
    console.log(this.$store.getters.music);
    if (this.$route.path == '/login') {
      this.isLogin = true
    } else {
      this.isLogin = false
    }
  },
  methods: {
    playMusic() {
      console.log(11);
      if (!this.isplay) {
        this.$refs.audio.play()
        this.isplay = true
      } else {
        // 关闭
        this.$refs.audio.pause()
        this.isplay = false
      }
    },
  },
  watch: {
    '$route.path'(val) {
      if (val == '/login') {
        this.isLogin = true
      } else {
        this.isLogin = false
      }
    },
    "$store.getters.music"(val) {
      this.isplay = true
      this.$refs.audio.play()
    }
  }
}

</script>

<style lang="scss" scoped>
.app {
  width: 100%;
  height: 100%;
  position: relative;

  .musicBtn {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 10%;
    right: 2%;
    border-radius: 50%;
    z-index: 99;
    transition: all 2s;
    background: url("@/assets/image/音乐.png") no-repeat center center / 100%
      100%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: gradient_301 10s linear infinite;

    .btnImg {
      width: 70%;
      height: 70%;
      border-radius: 10px;
      display: none;
    }
  }

  .noanim {
    animation: none;
  }

  .musicBtn:hover {
    animation: none;

    .btnImg {
      display: block;
      transition: all 1s;
    }
  }

  //
  @keyframes gradient_301 {
    to {
      transform: rotateZ(0);
    }

    from {
      transform: rotateZ(360deg);
    }

    to {
      transform: rotateZ(0);
    }
  }
}
</style>
